<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../../js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/record_audit1.css" />
		<link rel="stylesheet" type="text/css" href="../css/address_list.css" />

		<!--画图插件-->
		<script src="../../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.foot:nth-child(1) {
				color: #e83023;
			}
		.table{
			margin-bottom: 0;
		}
		.u2591_input{
			width: 2.5rem;
		    height: 28px;
		    border: 1px solid #fff;
		    border-radius: 12px;
		    margin-left: 2%;
		}
		.u2591_input2{
			width: 2.5rem;
		    height: 28px;
		    border: 1px solid #fff;
		    border-radius: 12px;
		    margin-left: 39%;
		}
		.top p:nth-child(3) {
		    width: 30%;
		    position: relative;
		    top: -6%;
		    right: -18%;
		}
		#list_addtab{
			top: 2.9rem;
		}
		</style>
	</head>

	<body>
		<div id="wrap">
			<div id="main">
				<div id="header">
					<a id="headImg" href="javascript:history.go(-1)"><img class="headImg" src="../../../images/12.png" /></a>
					<p id="headTitle" style="font-size: 16px;">通讯录</p>
				</div>
				<div id="content" style="padding-top: 1.2rem;background-color: #FFFFFF;">
					<div class="top">
							<select class="u2591_input" id="bumen" style="width:3rem;    font-size: 0.38rem;padding-left: 8px;border: 1px solid #E8323E; background: url(../../../images/store/sanjiao1.png) no-repeat 90%; background-size:13px;">
								<option value="总经办">总经办</option>
								<option value="综合办">综合办</option>
								<option value="技术部">技术部</option>
								<option value="策划部">策划部</option>
								<option value="市场部">市场部</option>
								<option value="客服部">客服部</option>
								<option selected="" value="">部门</option>
							</select>
							<select class="u2591_input2" id="zhiwei" style="width:3rem;    font-size: 0.38rem;margin:0;padding-left: 8px;border: 1px solid #E8323E; background: url(../../../images/store/sanjiao1.png) no-repeat 90%; background-size:13px;">
								<option value="组长">副总经理</option>
								<option value="班长">渠道总监</option>
								<option value="主任">企业部总监</option>
								<option value="部门主管">市场部经理</option>
								<option value="经理">产品经理</option>
								<option value="总监">培训讲师</option>
								<option value="总经理">网络推广</option>
								<option value="董事长">文案策划</option>
								<option value="经理">平面策划</option>
								<option value="总监">行政经理</option>
								<option value="总经理">财务经理</option>
								<option value="董事长">财务出纳</option>
								<option value="董事长">客服部经理</option>
								<option selected="" value="">职位</option>
							</select>
						<p style=" right: 0%; ">
							<input type="" name="" id="searchName" value="" placeholder="搜索姓名" style="height: 0.74rem;    font-size: 0.38rem;" />
							<a href="javascript:void(0)">
							<a id="search" href="javascript:void(0)"><img src="../../../images/coalltion/search.png" /></a>
						</p>
					</div>
					<ul id="list_add">
						<li style="padding: 0; padding-left:0.15rem ;">
							<table style="width: 100%;text-align: left;font-size: 0.38rem;" class="table table-hover">
								<tr style="font-weight: bold;">
									<td>姓名</td>
									<td>部门</td>
									<td>职位</td>
									<td>电话</td>
								</tr>
							</table>
						</li>
						<li>
							<a href="tel:13943007432">
								<p>国鑫</p>
								<p>市场部</p>
								<p>经理</p>
								<p>13943007432</p>
							</a>
						</li>
						<li>
							<a href="tel:13341439149">
								<p>李霞</p>
								<p>市场部</p>
								<p>渠道总监</p>
								<p>13341439149</p>
							</a>
						</li>
						<li>
							<a href="tel:17767764348">
								<p>马忠阳</p>
								<p>市场部</p>
								<p>网络推广</p>
								<p>17767764348</p>
							</a>
						</li>
						<li>
							<a href="tel:18643590827">
								<p>刘小正</p>
								<p>策划部</p>
								<p>平面策划</p>
								<p>18643590827</p>
							</a>
						</li>
						<li>
							<a href="tel:13596388991">
								<p>孟昱辰</p>
								<p>客服部</p>
								<p>客服部经理</p>
								<p>13596388991</p>
							</a>
						</li>
						<li>
							<a href="tel:18844066666">
								<p>孙泽慧</p>
								<p>董事会</p>
								<p>董事长</p>
								<p>18844066666</p>
							</a>
						</li>
						<li>
							<a href="tel:13944229698">
								<p>孙辉</p>
								<p>总经办</p>
								<p>副总经理</p>
								<p>13944229698</p>
							</a>
						</li>
						<li>
							<a href="tel:15354528295">
								<p>谭善明</p>
								<p>产品部</p>
								<p>产品经理</p>
								<p>15354528295</p>
							</a>
						</li>
						<li>
							<a href="tel:18644935395">
								<p>王元博</p>
								<p>综合办</p>
								<p>行政经理</p>
								<p>18644935395</p>
							</a>
						</li>
						<li>
							<a href="tel:17767764348">
								<p>杨晓宇</p>
								<p>策划部</p>
								<p>文案策划</p>
								<p>17767764348</p>
							</a>
						</li>
						<li>
							<a href="tel:17767753222">
								<p>闫峰</p>
								<p>市场部</p>
								<p>渠道总监</p>
								<p>17767753222</p>
							</a>
						</li>
						<li>
							<a href="tel:15144248886">
								<p>赵立虹</p>
								<p>综合办</p>
								<p>财务出纳</p>
								<p>15144248886</p>
							</a>
						</li>
						<li>
							<a href="tel:18686545435">
								<p>张金艳</p>
								<p>市场部</p>
								<p>培训讲师</p>
								<p>18686545435</p>
							</a>
						</li>
						<li>
							<a href="tel:18643210928">
								<p>张立杰</p>
								<p>综合部</p>
								<p>财务经理</p>
								<p>18643210928</p>
							</a>
						</li>
						<li>
							<a href="tel:13596223322">
								<p>朱立坤</p>
								<p>总经办</p>
								<p>企业部总监</p>
								<p>13596223322</p>
							</a>
						</li>

					</ul>

					<ul id="list_addtab">
						<li class="add_active">
							<a href="javascript:void(0);">A</a>
						</li>
						<li>
							<a href="javascript:void(0);">B</a>
						</li>
						<li>
							<a href="javascript:void(0);">C</a>
						</li>
						<li>
							<a href="javascript:void(0);">D</a>
						</li>
						<li>
							<a href="javascript:void(0);">E</a>
						</li>
						<li>
							<a href="javascript:void(0);">F</a>
						</li>
						<li>
							<a href="javascript:void(0);">G</a>
						</li>
						<li>
							<a href="javascript:void(0);">H</a>
						</li>
						<li>
							<a href="javascript:void(0);">I</a>
						</li>
						<li>
							<a href="javascript:void(0);">J</a>
						</li>
						<li>
							<a href="javascript:void(0);">K</a>
						</li>
						<li>
							<a href="javascript:void(0);">L</a>
						</li>
						<li>
							<a href="javascript:void(0);">M</a>
						</li>
						<li>
							<a href="javascript:void(0);">N</a>
						</li>
						<li>
							<a href="javascript:void(0);">O</a>
						</li>
						<li>
							<a href="javascript:void(0);">P</a>
						</li>
						<li>
							<a href="javascript:void(0);">Q</a>
						</li>
						<li>
							<a href="javascript:void(0);">R</a>
						</li>
						<li>
							<a href="javascript:void(0);">S</a>
						</li>
						<li>
							<a href="javascript:void(0);">T</a>
						</li>
						<li>
							<a href="javascript:void(0);">U</a>
						</li>
						<li>
							<a href="javascript:void(0);">V</a>
						</li>
						<li>
							<a href="javascript:void(0);">W</a>
						</li>
						<li>
							<a href="javascript:void(0);">X</a>
						</li>
						<li>
							<a href="javascript:void(0);">Y</a>
						</li>
						<li>
							<a href="javascript:void(0);">Z</a>
						</li>
					</ul>
					<div class="tishi">A</div>
				</div>
			</div>
			<div id="foot" class="row">
				<a class="foot col-xs-3 col-sm-3" href="../../kaoqin/index2.html">
					<img class="footImg" src="../../../images/guanlixuanzhong.png" />
					<p>管理</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../../coalition/colalition.html">
					<img class="footImg" src="../../../images/lianmengchushi.png" />
					<p>联盟</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../../store/store.html">
					<img class="footImg" src="../../../images/11.png" />
					<p>商城</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../../personage/personIndex.html">
					<img class="footImg" src="../../../images/13.png" />
					<p>我的</p>
				</a>
			</div>
		</div>

	</body>
	<script src="../../../js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/handlebars-v2.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/pinyin.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//字母tab
		$("#list_addtab li").on('touchstart', function() {
			$("#list_addtab li").removeClass('add_active');
			$(this).addClass('add_active');
			$(".tishi").show();
			$(".tishi").html($(this).children().html());
		})
		$("#list_addtab li").on('touchend', function() {
			$(".tishi").hide();
		})
		//模糊搜索
		function isContains(str, substr) {
			return new RegExp(substr).test(str);
		}
		//搜索姓名
		function searchName() {
			$("#list_add li").hide();
			$.each($("#list_add li"), function(idx, item) {
				if(idx != 0) {
					$("#list_add li:nth-child(1)").show();
					if(item.children[0]) {
						if(isContains(item.children[0].children[0].innerHTML, $("#searchName").val())) {
							$(this).show();
						}
					}

				}
			});
			if($("#searchName").val() == '') {
				//插入字母
				charuZimu();
			}
			$('#bumen').val('')
			$('#zhiwei').val('')
		}
		//搜索部门
		function searchBumen() {
			$("#list_add li").hide();
			$.each($("#list_add li"), function(idx, item) {
				if(idx != 0) {
					$("#list_add li:nth-child(1)").show();
					//					console.log(item.children[1])
					if(item.children[0]) {
						if(isContains(item.children[0].children[1].innerHTML, $('#bumen').val()) && isContains(item.children[0].children[2].innerHTML, $('#zhiwei').val())) {
							$(this).show();
						}
					}

				}
			});
		}
		//搜索职位
		function searchZhiwei() {
			$("#list_add li").hide();
			$.each($("#list_add li"), function(idx, item) {
				if(idx != 0) {
					$("#list_add li:nth-child(1)").show();
					//					console.log(item.children[1])
					if(item.children[0]) {
						if(isContains(item.children[0].children[2].innerHTML, $('#zhiwei').val()) && isContains(item.children[0].children[1].innerHTML, $('#bumen').val()) && isContains(item.children[0].children[0].innerHTML, $("#searchName").val())) {
							$(this).show();
						}
					}

				}
			});
		}
		//插入字母
		function charuZimu() {
			var reg = /^\s+|\s+$/g;
			var a = '';
			//清空字母
			$('.zimu').remove()
			$.each($("#list_add li"), function(idx, item) {
				//首个汉字拼音字母大写格式
				if(idx != 0 && item.children[0]) {
					var pinyin = codefans_net_CC2PY(item.children[0].children[0].innerHTML.replace(reg, "").charAt(0)).replace(reg, "").charAt(0).toUpperCase()
					//				console.log(pinyin)
					if(a != pinyin) {
						$(this).before('<li class="zimu" style="border: 0;background-color: #E6E6E6;color: #000;">' + pinyin + '<li>');
						a = pinyin
					}
				}
			});
		}
		$(document).on('click', '#search', function() {
			searchZhiwei()
			if($("#searchName").val() == '') {
				//插入字母
				charuZimu();
			}
		})
		//姓名搜索
		$('#searchName').on('keyup', function(e) {
			if(e.which == 13) {
				searchZhiwei()
				if($("#searchName").val() == '') {
				//插入字母
				charuZimu();
			}
			}
		})
		//字母检索
		$(document).on('click', '#list_addtab li a', function() {
			this_ = $(this);
			$.each($('.zimu'), function(idx, item) {
				if($(this).html() == this_.html()) {
					if(window.screen.width <= 320) {
						$("html,body").animate({
							scrollTop: $(this).offset().top - 44
						}, 100);
					} else if(window.screen.width > 320 && window.screen.width <= 375) {
						$("html,body").animate({
							scrollTop: $(this).offset().top - 50
						}, 100);
					} else if(window.screen.width > 375 && window.screen.width <= 425) {
						$("html,body").animate({
							scrollTop: $(this).offset().top - 55
						}, 100);
					} else if(window.screen.width > 425 && window.screen.width <= 785) {
						$("html,body").animate({
							scrollTop: $(this).offset().top - 70
						}, 100);
					}

				}
			});
		})
		//部门检索
		$('#bumen').on('change', function() {
			searchBumen();
			$('#searchName').val('');
			if($('#bumen').val() == '' && $('#zhiwei').val() == '') {
				searchName();
			}
		})
		//职位检索
		$('#zhiwei').on('change', function() {
			searchZhiwei();
			$('#searchName').val('');
			if($('#bumen').val() == '' && $('#zhiwei').val() == '') {
				searchName();
			}
		})
		charuZimu();
	</script>

</html>